<template>
	<view class="pics">
		<scroll-view scroll-y="true" class="left_menu">
			<view class="left_item" :class="index===currentIndex?'current_item':''" v-for="(item,index) in leftMenuList"
				:key="index" @click="checkCurrent(index)">{{item}}</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="right_content">
			<view class="gooods_group" v-for="(item,index) in rightContentList">
				<view class="goods_title">--- {{item.cat_name}} ---</view>
				<view class="list">
					<view class="item" v-for="(goodsItem,index) in item.children" @click="jumpDetail(goodsItem.cat_id)">
						<image :src="goodsItem.cat_icon" mode="widthFix"></image>
						<view>{{goodsItem.cat_name}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftMenuList: [],
				rightContentList: [],
				currentIndex: 0
			}
		},
		onLoad() {
			this.getCatrgories()
		},
		catrgories: [],
		methods: {
			async getCatrgories() {
				const res = await this.$myRequest({
					url: '/categories'
				})
				console.log(res)
				this.catrgories = res.data.message
				this.leftMenuList = this.catrgories.map(v => v.cat_name)
				this.rightContentList = this.catrgories[0].children
			},
			checkCurrent(index) {
				this.currentIndex = index
				this.rightContentList = this.catrgories[this.currentIndex].children
			},
			jumpDetail(cid) {
				console.log(cid)
				uni.navigateTo({
					url: '../goods_list/goods_list?cid=' + cid
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: $shop-color-bg;
	}

	.pics {
		height: 100%;
		display: flex;

		.left_menu {
			flex: 2;

			.left_item {
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
			}

			.current_item {
				background: #fff;
				border-bottom: 1rpx solid #d3d2d3;
				border-left: 6rpx solid $shop-color;
			}
		}

		.right_content {
			flex: 5;
			background: #fff;

			.gooods_group {
				.goods_title {
					width: 100%;
					line-height: 100rpx;
					text-align: center;
				}

				.list {
					margin: 20rpx 0;
					display: flex;
					flex-wrap: wrap;

					.item {
						margin-top: 10rpx;
						width: 33.33%;
						text-align: center;

						image {
							width: 50%;
						}

						view {
							font-size: 26rpx;
						}
					}

				}
			}
		}
	}
</style>
